<template>
  <div class="product-container">
    <a-card class="search-card">
      <a-form :model="searchForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" layout="inline">
        <a-form-item label="产品名称">
          <a-input v-model:value="searchForm.name" placeholder="请输入产品名称" />
        </a-form-item>
        <a-form-item label="产品状态">
          <a-select v-model:value="searchForm.status" placeholder="请选择状态" style="width: 120px" allow-clear>
            <a-select-option value="1">上架</a-select-option>
            <a-select-option value="0">下架</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSearch">
            <template #icon>
              <SearchOutlined />
            </template>
            搜索
          </a-button>
          <a-button @click="handleReset" class="smart-margin-left10">
            <template #icon>
              <ReloadOutlined />
            </template>
            重置
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <a-card class="table-card">
      <template #title>
        <span>产品列表</span>
      </template>
      <template #extra>
        <a-button type="primary" @click="handleAdd">
          <template #icon>
            <PlusOutlined />
          </template>
          新增产品
        </a-button>
      </template>
      <a-table :data-source="productList" :columns="columns" :pagination="false" bordered>
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-tag :color="record.status === '1' ? 'success' : 'default'">
              {{ record.status === '1' ? '上架' : '下架' }}
            </a-tag>
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <div class="smart-table-operate">
              <a-button type="link" @click="handleEdit(record)">编辑</a-button>
              <a-button 
                type="link" 
                :danger="record.status === '1'"
                @click="handleChangeStatus(record)">
                {{ record.status === '1' ? '下架' : '上架' }}
              </a-button>
              <a-button type="link" danger @click="handleDelete(record)">删除</a-button>
            </div>
          </template>
        </template>
      </a-table>
      <div class="pagination-container">
        <a-pagination
          show-size-changer
          show-quick-jumper
          :current="pageInfo.currentPage"
          :page-size-options="['10', '20', '50', '100']"
          :page-size="pageInfo.pageSize"
          v-model:pageSize="pageInfo.pageSize"
          :total="pageInfo.total"
          @show-size-change="handleSizeChange"
          @change="handleCurrentChange"
          :show-total="(total) => `共 ${total} 条`"
        />
      </div>
    </a-card>

    <!-- 产品详情对话框 -->
    <a-modal :title="dialogTitle" v-model:open="dialogVisible" :width="600" @ok="submitForm">
      <a-form :model="productForm" :rules="productRules" ref="productFormRef" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="产品名称" name="name">
          <a-input v-model:value="productForm.name" placeholder="请输入产品名称" />
        </a-form-item>
        <a-form-item label="所属商户" name="merchant">
          <a-select v-model:value="productForm.merchant" placeholder="请选择商户">
            <a-select-option 
              v-for="merchant in merchants" 
              :key="merchant.id" 
              :value="merchant.name">
              {{ merchant.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="分类" name="category">
          <a-select v-model:value="productForm.category" placeholder="请选择分类">
            <a-select-option value="电子产品">电子产品</a-select-option>
            <a-select-option value="家居用品">家居用品</a-select-option>
            <a-select-option value="服装配饰">服装配饰</a-select-option>
            <a-select-option value="食品饮料">食品饮料</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="价格" name="price">
          <a-input v-model:value="productForm.price" placeholder="请输入价格">
            <template #addonAfter>元</template>
          </a-input>
        </a-form-item>
        <a-form-item label="库存" name="stock">
          <a-input-number v-model:value="productForm.stock" :min="0" :max="999999" style="width: 100%" />
        </a-form-item>
        <a-form-item label="状态" name="status">
          <a-radio-group v-model:value="productForm.status">
            <a-radio value="1">上架</a-radio>
            <a-radio value="0">下架</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { message, Modal } from 'ant-design-vue';
import { SearchOutlined, ReloadOutlined, PlusOutlined } from '@ant-design/icons-vue';

export default {
  name: 'ProductManagement',
  components: {
    SearchOutlined,
    ReloadOutlined,
    PlusOutlined
  },
  data() {
    return {
      searchForm: {
        name: '',
        status: undefined
      },
      productList: [
        { id: 'P1001', name: '智能手机', merchant: '北京科技有限公司', category: '电子产品', price: '2999.00', stock: 1000, status: '1', createTime: '2023-01-15 10:30:00' },
        { id: 'P1002', name: '无线耳机', merchant: '北京科技有限公司', category: '电子产品', price: '299.00', stock: 500, status: '1', createTime: '2023-02-20 14:45:00' },
        { id: 'P1003', name: '沙发', merchant: '广州电子商务有限公司', category: '家居用品', price: '1999.00', stock: 50, status: '0', createTime: '2023-03-10 09:15:00' },
        { id: 'P1004', name: 'T恤', merchant: '深圳创新科技有限公司', category: '服装配饰', price: '99.00', stock: 2000, status: '1', createTime: '2023-04-05 16:20:00' }
      ],
      merchants: [
        { id: 'M1001', name: '北京科技有限公司' },
        { id: 'M1002', name: '上海信息技术有限公司' },
        { id: 'M1003', name: '广州电子商务有限公司' },
        { id: 'M1004', name: '深圳创新科技有限公司' }
      ],
      columns: [
        {
          title: '产品ID',
          dataIndex: 'id',
          key: 'id',
          width: 100
        },
        {
          title: '产品名称',
          dataIndex: 'name',
          key: 'name',
          width: 180
        },
        {
          title: '所属商户',
          dataIndex: 'merchant',
          key: 'merchant',
          width: 180
        },
        {
          title: '分类',
          dataIndex: 'category',
          key: 'category',
          width: 120
        },
        {
          title: '价格',
          dataIndex: 'price',
          key: 'price',
          width: 100
        },
        {
          title: '库存',
          dataIndex: 'stock',
          key: 'stock',
          width: 100
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          width: 100
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          key: 'createTime',
          width: 180
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 200,
          fixed: 'right'
        }
      ],
      pageInfo: {
        currentPage: 1,
        pageSize: 10,
        total: 4
      },
      dialogVisible: false,
      dialogTitle: '',
      productForm: {
        id: '',
        name: '',
        merchant: undefined,
        category: undefined,
        price: '',
        stock: 0,
        status: '1'
      },
      productRules: {
        name: [
          { required: true, message: '请输入产品名称', trigger: 'blur' }
        ],
        merchant: [
          { required: true, message: '请选择所属商户', trigger: 'change' }
        ],
        category: [
          { required: true, message: '请选择分类', trigger: 'change' }
        ],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur' }
        ]
      },
      productFormRef: null
    }
  },
  methods: {
    handleSearch() {
      message.info('执行搜索操作');
    },
    handleReset() {
      this.searchForm = {
        name: '',
        status: undefined
      };
      message.info('重置搜索条件');
    },
    handleAdd() {
      this.dialogTitle = '新增产品';
      this.productForm = {
        id: '',
        name: '',
        merchant: undefined,
        category: undefined,
        price: '',
        stock: 0,
        status: '1'
      };
      this.dialogVisible = true;
    },
    handleEdit(record) {
      this.dialogTitle = '编辑产品';
      this.productForm = { ...record };
      this.dialogVisible = true;
    },
    handleChangeStatus(record) {
      const newStatus = record.status === '1' ? '0' : '1';
      const statusText = newStatus === '1' ? '上架' : '下架';
      
      Modal.confirm({
        title: '提示',
        content: `确定要${statusText}产品"${record.name}"吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          record.status = newStatus;
          message.success(`${statusText}成功`);
        },
        onCancel: () => {
          message.info(`已取消${statusText}`);
        }
      });
    },
    handleDelete(record) {
      Modal.confirm({
        title: '提示',
        content: `确定要删除产品"${record.name}"吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          message.success('删除成功');
        },
        onCancel: () => {
          message.info('已取消删除');
        }
      });
    },
    handleSizeChange(current, pageSize) {
      this.pageInfo.pageSize = pageSize;
      message.info(`每页显示${pageSize}条`);
    },
    handleCurrentChange(page, pageSize) {
      this.pageInfo.currentPage = page;
      message.info(`当前页: ${page}`);
    },
    submitForm() {
      this.$refs.productFormRef.validate().then(() => {
        message.success('保存成功');
        this.dialogVisible = false;
      }).catch(() => {
        // 验证失败
      });
    }
  }
}
</script>

<style scoped>
.product-container {
  padding: 20px;
}

.search-card,
.table-card {
  margin-bottom: 20px;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>